Day_4 Web html 初開始 with vscode(下)

2023 iThome 鐵人賽

DAY 4

Modern Web

三十天持續努力挑戰py系列第 4 篇

15th鐵人賽

clevens1008

團隊NUTC_IMAC_WEB_桑貝比

2023-09-19 01:37:29

338 瀏覽

分享至

還沒看過上篇的請先看上篇喔。
css雖然可以直接寫在div後面但是，那樣寫的話以後有些東西會用到一模一樣的style，會要再寫一次這樣會變得很麻煩，所以其實可以在外面的style裡面寫上此樣式，然後再把這個樣式套用在某個class上，再把div套上class就可以使用其樣式了，以後有任何div需要相同的樣式也可以直接給他class就可以了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .test{
        color: red;
        font-size: 20px;
    }
</style>
<body>
    <p>Lorem, ipsum.</p>
    <h1>Lorem ipsum dolor sit amet.</h1>
    <h2>Lorem, ipsum.</h2>
    <a href="www.youtube.com">Lorem, ipsum.</a>
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS7TVwjjjxSYr4-Ibegd4YU-GORlReBpnQej2C5ju8ouA&s" alt="pun">
    
    <div class="test">
        <p>Lorem ipsum dolor sit amet.</p>
        <h2>Lorem, ipsum.</h2>
    </div>
    <div class="test">
        Lorem ipsum dolor sit amet.
    </div>
</body>
</html>

css也不單單只有這樣，詳細可以看我另外的幾篇。
html除了css還有一個很重要的東西JavaScript(js)，這是用來做一些腳本、資料傳遞、動畫等等的功能，也可以用js更改css屬性，是一個十分強大的功能。
我們在裡面新增一個按鈕，之後添加onclick的Function，之後再script裡寫上此函式想要執行的動作如下。

    <button onclick="myFunction()">Click me</button>
    <script>
        function myFunction(){
            alert("Hello World");
        }
    </script>